import React from 'react';

import { ConfigProvider } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/lib/locale/zh_CN';
import 'antd/dist/antd.css';
import { Radio } from 'antd';

import Router from './router' // 路由配置

// redux集成
import { Provider } from 'react-redux'
import store from './redux'

// context（上下文）
import { ThemeContext, themes } from '@/context/theme'
// <Theme.Provider value={theme.primary}>
//           </Theme.Provider>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: themes.primary,
      themeType: 'primary'
    }
  }

  toggleTheme = e => {
    const type = e.target.value
    let theme = null
    switch (type) {
      case 'primary':
        theme = themes.primary
        break
      case 'green':
        theme = themes.green
        break
      // No Default  
    }
    this.setState({
      themeType: type,
      theme
    });
  };
  render () {
    const { themeType, theme } = this.state
    return (
      <React.StrictMode>
        <ConfigProvider locale={zhCN}>
          <Provider store={store}>
            <ThemeContext.Provider value={theme}>
              <Radio.Group value={themeType} onChange={this.toggleTheme}>
                <Radio.Button value="primary">蓝色</Radio.Button>
                <Radio.Button value="green">绿色</Radio.Button>
              </Radio.Group>
              <Router />
            </ThemeContext.Provider>
          </Provider>
        </ConfigProvider>
      </React.StrictMode>
    )
  }
}

export default App